<template>
	<div class="slider">
		<div class="slider-img" @mouseover="clearInv" @mouseout="runInv">
			<a :href="imageUrl">
				<transition name="slider">
					<div class="slider-img-container" v-for="(item, index) in slides" v-if="nowIndex === index" :key="index">
						<div class="slider-img-content">
							<img :src="item.img_url" />
						</div>
					</div>
				</transition>
			</a>
			<div class="slider-icon">
				<ul>
					<li v-for="(item, index) in slides" @click="goto(index)" @mouseover="goto(index)">
						<a :class="{ active: index === nowIndex }"></a>
					</li>
				</ul>
			</div>
		</div>

		<div class="slider-tab">
			<div class="slider-tab-container">
				<template v-if="!$store.state.loginUser.username">
						<div class="slider-tab-top">
							<ul>
								<li>
									<div class="slider-tab-item slider-tab-icon-installment">
										{{$t('message.zeroDown')}}
									</div>
								</li>
								<li>
									<div class="slider-tab-item slider-tab-icon-poundage">
										{{$t('message.fewerFees')}}
									</div>
								</li>
								<li>
									<div class="slider-tab-item slider-tab-icon-downPayment">
										{{$t('message.instalment')}}
									</div>
								</li>
							</ul>
						</div>
						<div class="slider-tab-login">
							<router-link class="slider-tab-btn btn-gradient" to="/register" tag="button">{{$t('message.freeRegister')}}</router-link>
							<p>{{ $t('message.haveAccount') }}？<a href="/login"> {{$tc('message.login', 2)}}</a></p>
						</div>
				</template>
				<template v-else>
					<div class="slider-tab-user">
						<div class="slider-tab-img">
							<img :src="profile"/>
						</div>
						<div class="slider-tab-name">
							Hi,{{ $store.state.loginUser.username }}
						</div>
						<ul class="slider-tab-list">
							<li class="pay">
								<div class="slider-tab-num"><router-link to="/personal/order/2/1">{{ pay }}</router-link></div>
								<div class="slider-tab-text">{{ $t('message.paymentPending') }}</div>
							</li>
							<li class="send">
								<div class="slider-tab-num"><router-link to="/personal/order/3/1">{{ send }}</router-link></div>
								<div class="slider-tab-text">{{ $t('message.waitToSend') }}</div>
							</li>
							<!-- <li class="receive">
								<div class="slider-tab-num"><router-link to="/personal/order/4/1">{{ receive }}</router-link></div>
								<div class="slider-tab-text">{{ $t('message.hasBeenShipped') }}</div>
							</li> -->
						</ul>
						<div class="slider-tab-order">
							<button type="button" @click="toPersonalOrder">{{$t('message.myOrder')}}</button>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'IndexSlider',
  props: {
    slides: {
      type: Array,
      default: []
    },
    inv: {
      type: Number,
      default: 1000
    },
    orderNumber: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      nowIndex: 0,
      isShow: true,
      isEditing: false
    }
  },
  computed: {
    imageUrl () {
      return this.slides[this.nowIndex].jmp_url
    },
    profile () {
      if (this.$store.state.loginUser.profile && this.$store.state.loginUser.profile !== 'null') {
        return this.$store.state.loginUser.profile
      } else {
        return require('../../assets/images/personal/account/profile_default.png')
      }
    },
    pay () {
      return this.orderNumber[2]
    },
    send () {
      if (this.orderNumber[6]) {
        return this.orderNumber[6]
      } else {
        return '0'
      }
    },
    receive () {
      if (this.orderNumber['7']) {
        return this.orderNumber['7']
      } else {
        return '0'
      }
    },
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      } else {
        return this.nowIndex - 1
      }
    },
    nextIndex () {
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      } else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.nowIndex = index
    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    },
    toPersonalOrder () {
      this.$router.push({ path: '/personal/order/0/1' })
    }
  },
  mounted () {
    this.runInv()
  }
}
</script>

<style scoped>
.slider-enter {
	transform: translateX(100%);
}

.slider-enter-active, .slider-leave-active {
	transition: all .8s;
}

.slider-leave-to {
	transform: translateX(-100%);
}

.slider {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.slider-img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.slider-img-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
}

.slider-img-content {
	position: absolute;
	top: 50%;
	left: 50%;
}

.slider-img-content img {
	display: block;
	transform: translate(-50%, -50%);
}

.slider-icon {
	width: 100%;
	position: absolute;
	bottom: 24px;
	left: 0;
}

.slider-icon ul {
	float: left;
	position: relative;
	left: 50%;
}

.slider-icon li {
	margin: 0 10px;
	float: left;
	position: relative;
	right: 50%;
}

.slider-icon a {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid #fff;
	border-radius: 50%;
}

.active {
	background-color: #fff;
}

.canvas {
	display: none;
}

.slider-tab {
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

.slider-tab-container {
	width: 192px;
	position: absolute;
	top: 70px;
	right: 0px;
	background-color: #fff;
	padding: 0 24px;
}

.slider-tab-top {
	height: 180px;
	border-bottom: 1px solid #e6e6e6;
	padding: 10px 0 25px 0;
}

.slider-tab-top ul {

}

.slider-tab-top li {
	height: 30px;
	margin-top: 30px;
}

.slider-tab-item {
	padding-left: 46px;
	line-height: 30px;
	font-size: 14px;
	color: #333;
	position: relative;
}

.slider-tab-item:before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 6px 10px 0 rgba(249,174,45,0.3);
	position: absolute;
	top: 0;
	left: 0;
}

.slider-tab-icon-installment:before {
	background: url(../../assets/images/index/icon_installment.png) no-repeat center;
}

.slider-tab-icon-poundage:before {
	background: url(../../assets/images/index/icon_poundage.png) no-repeat center;
}

.slider-tab-icon-downPayment:before {
	background: url(../../assets/images/index/icon_downPayment.png) no-repeat center;
}

.slider-tab-login {
	padding: 24px 0 14px;
}

.slider-tab-login p {
	line-height: 16px;
	text-align: center;
	font-size: 11px;
	color: #aaa;
	margin-top: 14px;
}

.slider-tab-login p a {
  color: #ff600a;
}

.slider-tab-btn {
	width: 100px;
	height: 36px;
	display: block;
	margin: 0 auto;
	border: 0;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.slider-tab-user {
	padding: 40px 0;
}

.slider-tab-img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
}

.slider-tab-img img {
	width: 60px;
	height: 60px;
}

.slider-tab-name {
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	color: #666;
	margin-top: 16px;
	text-align: center;
}

.slider-tab-list {
	height: 40px;
	margin-top: 32px;
	/*overflow: hidden;*/
}

.slider-tab-list li {
	float: left;
	text-align: center;
	margin-right: 1px;
	position: relative;
}

.slider-tab-list li:after {
	content: '';
	display: block;
	width: 0;
	height: 24px;
	border-right: 1px solid #e6e6e6;
	position: absolute;
	top: 8px;
	right: -1px;
}

.slider-tab-list li:last-child {
	margin-right: 0;
}

.slider-tab-list li:last-child:after {
	display: none;
}

.pay, .receive {
	width: 90px;
}

.send {
	width: 100px;
}

.slider-tab-num {
	height: 19px;
	line-height: 19px;
	font-size: 16px;
}

.slider-tab-num a {
	color: #666;
}

.slider-tab-num a:hover {
	color: #333;
}

.slider-tab-text {
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #a5a5a5;
	margin-top: 4px;
}

.slider-tab-order {
	height: 36px;
	text-align: center;
	margin-top: 40px;
}

.slider-tab-order button {
	border: 1px solid #ff600a;
	background-color: #fff;
	color: #ff600a;
	cursor: pointer;
  padding: 8px 15px;
}

.slider-tab-order button:hover {
	color: #fff;
	background-color: #ff600a;
}

.slider-tab-order button:active {
	color: #fff;
	background-color: #e83700;
}
</style>
